<template>
  <el-dialog
    :append-to-body="true"
    :close-on-click-modal="false"
    :title="title"
    :top="'2%'"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :border="border"
      :data="list"
      :size="lineHeight"
      :stripe="stripe"
    >
      <el-table-column align="center" label="序号" width="95">
        <template #default="{ $index }">
          {{ $index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="(item, index) in columns"
        :key="index"
        align="center"
        :label="item.label"
        :width="item.width"
      >
        <template #default="{ row }">
          <span>{{ row[item.prop] || '-' }}</span>
        </template>
      </el-table-column>
      <template #empty>
        <el-image
          class="vab-data-empty"
          :src="require('@/assets/empty_images/data_empty.png')"
        />
      </template>
    </el-table>
    <el-pagination
      background
      :current-page="queryForm.pageNum"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </el-dialog>
</template>

<script>
  import { getOverSevenRoomList } from '@/api/sys'

  export default {
    name: 'OverSevenHouse',
    data() {
      return {
        border: true,
        fold: true,
        height: this.$baseTableHeight(1),
        stripe: false,
        lineHeight: 'medium',
        columns: [
          {
            label: '房间人数',
            width: '100',
            prop: 'residentCount',
            sortable: true,
          },
          {
            label: '小区名称',
            width: '150',
            prop: 'areaName',
            sortable: true,
          },
          {
            label: '楼牌号',
            width: '100',
            prop: 'builderName',
            sortable: false,
          },
          {
            label: '单元',
            width: '150',
            prop: 'unitName',
            sortable: false,
          },
          {
            label: '楼层',
            width: '150',
            prop: 'floorName',
            sortable: false,
          },
          {
            label: '房间',
            width: '150',
            prop: 'roomName',
            sortable: false,
          },
          {
            label: '联系人姓名',
            width: '150',
            prop: 'linkName',
            sortable: false,
          },
          {
            label: '联系人手机号',
            width: '150',
            prop: 'linkPhone',
            sortable: false,
          },
          {
            label: '联系人证件类型',
            width: '150',
            prop: 'linkCertTypeName',
            sortable: false,
          },
          {
            label: '联系人证件号码',
            width: '250',
            prop: 'linkCertNo',
            sortable: false,
          },
        ],
        list: [],
        imageList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {
          condition: {
            orderBy: 'id',
            orderDirect: 'desc',
          },
          pageNum: 1,
          pageSize: 10,
        },
        form: {
          title: '',
          author: '',
        },
        rules: {
          title: [{ required: true, trigger: 'blur', message: '请输入标题' }],
          author: [{ required: true, trigger: 'blur', message: '请输入作者' }],
        },
        title: '房间人数超过7人名单',
        dialogFormVisible: false,
      }
    },
    created() {},
    methods: {
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNum = val
        this.fetchData()
      },
      handleQuery() {
        this.queryForm.pageNum = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        try {
          const param = {
            pageNum: this.queryForm.pageNum,
            pageSize: this.queryForm.pageSize,
            condition: { ...this.queryForm.condition },
          }
          const res = await getOverSevenRoomList(param)
          if (res && res.data) {
            const { list, total } = res.data
            this.list = list || []
            this.total = total || 0
          }
        } catch (e) {
          console.log(e)
        }
        this.listLoading = false
      },
      showEdit() {
        this.dialogFormVisible = true
        this.fetchData()
      },
      close() {
        this.dialogFormVisible = false
      },
    },
  }
</script>
